<template>
  <div>
    <el-form
      :rules="rules"
      :model="formLabelAlign"
      label-position="top"
      label-width="auto"
      ref="fromInput"
    >
      <el-form-item
        :label="$t('layer.wallet.Withdrawalpassword')"
        prop="conInputValues"
      >
        <el-input
          v-model="formLabelAlign.conInputValues"
          maxlength="4"
          type="password"
        />
      </el-form-item>

      <el-form-item
        :label="$t('layer.wallet.Withdrawalpassword')"
        prop="inputValues"
      >
        <el-input
          v-model="formLabelAlign.inputValues"
          maxlength="4"
          type="password"
        />
      </el-form-item>
    </el-form>
    <div class="w-full flex justify-center">
      <button class="h-8 bg-[#1475e1] w-full rounded-md" @click="submitFrom">
        {{ $t("layer.wallet.nextstep") }}
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { withdrawSetPsw } from "../../api/wallet.js";
import { ElNotification } from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
/**
 * 提现密码
 */
const formLabelAlign = reactive({
  conInputValues: "",
  inputValues: "",
  walletPwd: ""
});
const rules = reactive({
  conInputValues: [
    {
      required: true,
      message: `${t("page.setting.Enter")}${t(
        "layer.wallet.Withdrawalpassword"
      )}`,
      trigger: "change",
      min: 4,
      max: 4
    }
  ],
  inputValues: [
    {
      required: true,
      message: `${t("page.setting.Enter")}${t(
        "layer.wallet.Withdrawalpassword"
      )}`,
      trigger: "change",
      min: 4,
      max: 4
    },
    {
      validator: (rule, value, callback) => {
        const conInputValues = formLabelAlign.conInputValues; // 假设form是包含conInputValues的响应式对象
        if (value !== conInputValues) {
          callback(new Error(`${t("layer.wallet.inconsistent")}`));
        } else {
          callback();
        }
      },
      trigger: "change"
    }
  ]
});

const emit = defineEmits(["submitFrom"]);
const fromInput = ref();
// 提交表单
const submitFrom = async () => {
  await fromInput.value.validate((valid, fields) => {
    if (valid) {
      // 设置提现密码
      let data = {
        password: formLabelAlign.conInputValues,
        password_confirm: formLabelAlign.inputValues
        // ticket: ticket.value // 假设 ticket 已经定义
      };

      withdrawSetPsw(data).then((res: any) => {
        if (res.errno == 0) {
          ElNotification({
            position: "top-left",
            zIndex: 1004,
            title: "Success",
            message: t("layer.wallet.passwordSuccessfully"),
            type: "success"
          });
          formLabelAlign.inputValues = "";
          formLabelAlign.inputValues = "";
          emit("submitFrom");
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  color: #fff;
}
:deep(.el-form--label-top .el-form-item) {
  margin-bottom: 32px;
}
</style>
